<template>
  <div class="order">
    <div class="head">
      <h1>{{orderItem.date}}</h1>
      <a class="more">再来一单</a>
      <a class="delete">删除</a>
    </div>

    <div class="infor">
      <div class="name">{{orderItem.name}}</div>
      <div class="num">{{orderItem.num}}</div>

      <div class="price">￥{{orderItem.price}}</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    props: {
      msg: String,
      orderItem: {
        type: Object,
        default: {
          name: "name",
          price: 199,
          num: 10,
          date: "20190101"
        }
      }
    },
    data() {
      return {

      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .order {
    width: 100%;
    height: 1.5rem;
    padding: 0.25rem 0.2rem;
    box-sizing: border-box;
    background: #fff;
    margin-bottom: 5px;
    /* border-bottom: 1px solid #999; */
  }


  .order .infor {
    padding-left: 0.2rem;
    box-sizing: border-box;
    display: flex;

  }
  .order .head{
    display: flex;
    height: 0.4rem;
    align-content: space-between;
  }
  .order .head h1 {
    font-size: 0.28rem;
    font-weight: 400;
    color: #666;
    flex: 2 2 auto;
  }
  .order .head .more{
    text-align: center;
    margin-right: 0.2rem;
    /* height: 0.35rem;
    line-height: 0.35rem; */
    padding: 0.07rem 0rem;
    background: rgb(68,181,73);
    color: #fff;
    flex: 0 0 1.2rem;
    border-radius: 0.2rem;
    font-size: 0.20rem;

  }
  .order .head .delete{
    color: #777;
    flex: 1 1 auto;
    text-align: center;

  }
  

  .order .infor>div {
    height: 0.8;
    line-height: 0.8rem;
    font-size: 0.3rem;
  }

  .order .infor>div.name {
    width: 56%;
    flex: 0 0 auto;
  }

  .order .infor>div.num {
    width: 25%;
    flex: 0 0 auto;
  }

  .order .infor>div.price {
    color: #f00;
  }
</style>